<template>
  <div class="tile is-ancestor">
    <div class="tile is-parent is-8" style="width: 100%;">
      <article class="tile is-child box">
        <div style="margin-top: 15px; text-align: center;">
          <el-input placeholder="请输入标题内容" v-model="input3" style="width: 600px; ">
            <el-button slot="append" icon="el-icon-search" @click="getData()" clearable></el-button>
          </el-input>
        </div>
        <ul
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="limit"
          style="height: 100vh;overflow-y: auto;"
        >
          <div class="box" v-for="(content, index) in contents" :key="index">
            <article class="media">
              <figure class="media-left">
                <p class="image is-64x64">
                  <!-- <img src="../../assets/img/user1.jpg" class="size" /> -->
                  <img style="width: 80px;" v-if="content.picturePath" :src="content.picturePath" class="avatar" />
                  <img v-else src="../../assets/img/user1.jpg" />
                </p>
              </figure>
              <div class="media-content">
                <div class="content">
                  <p v-if="content.status==0">
                    <strong>发帖人用户名:{{ content.nickName }}</strong>
                    <br />
                    发帖标题:{{ content.title }}
                    <br />
                    发帖时间:{{content.createTime}}
                  </p>
                  <p v-if="content.status==2">
                      该贴违规,正在整改中
                  </p>
                </div>
                <nav class="level is-mobile">
                  <div class="level-left">
                    <a class="level-item">
                      <span class="icon is-small">
                        <i class="fa fa-eye"></i>
                      </span>
                      {{ content.browseNum }}
                    </a>
                    <a class="level-item">
                      <span class="icon is-small">
                        <i class="fas fa-comment-dots"></i>
                      </span>
                      {{ content.contentNum }}
                    </a>
                    <a class="level-item" @click="update(content)">
                      <span
                        class="icon is-small"
                        :style="content.isLike == '1' ? 'color:red;' : ''"
                      >
                        <i class="fas fa-heart"></i>
                      </span>
                      {{ content.commentLike }}
                    </a>
                    <a class="level-item" v-if="userInfo.userAccount == content.createAccount" >
                      <span class="icon is-small" style="color: rgb(64, 158, 255);">
                        <i class="fas fa-trash" @click="del(content)"></i>
                      </span>
                    </a>
                  </div>
                </nav>
              </div>
              <div class="media-right">
                <a class="navbar-item" slot="trigger" role="button">
                  <el-button v-if="content.status==0" type="primary" outlined @click="detail(content)">查看详情</el-button>
                </a>
              </div>
            </article>
          </div>
        </ul>
      </article>
      <!-- 分页组件 -->
      <el-pagination
        class="page-box"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="pageparm.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageparm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageparm.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, update } from "../../api/postMessage";
import { delMessage } from "../../api/tiezi";
export default {
  data() {
    return {
      input3: "",
      isLoading: false,
      isFullPage: false,
      btnFlag: false,
      busy: false,
      limit: 20,
      flag: 0,
      contents: [],
      test: [],
      ArticleTypes: [],
      number: 1,
      totalPages: 3,
      pageparm: {
        currentPage: 0,
        pageSize: 10,
        total: 0
      },
      userInfo:{}
    };
  },
  mounted() {},
  methods: {
    del(row){
      let param = {}
      param.status = 1
      param.id = row.id
      delMessage(param).then(res =>{
        if(res.status == 200){
          this.$message({
            type: "success",
            message: "删除成功"
          });
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
        this.getData();
      })
    },
    detail(row) {
      let param = {};
      param.userAccount = row.userAccount;
      param.type = "3";
      param.id = row.id;
      update(param).then(res => {});
      setTimeout(() => {
        this.logining = false;
        this.$router.push({
          path: "/user/PostArticleInfo",
          query: {
            id: row.id
          }
        });
      }, 1000);
    },
    update(row) {
      let param = {};
      param.userAccount = row.userAccount;
      param.type = row.isLike == "1" ? "2" : "1";
      param.id = row.id;
      update(param).then(res => {
        if (res.status) {
          this.getData();
        }
      });
    },
    getData() {
      let param = {};
      param.pageIndex = this.pageparm.currentPage;
      param.pageSize = this.pageparm.pageSize;
      param.title = this.input3;
      getList(param).then(res => {
        if (res.status == 200) {
          this.contents = res.data;
          this.pageparm.total = res.total;
        }
      });
    },
    handleCurrentChange(val) {
      this.pageparm.currentPage = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageparm.pageSize = val;
      this.getData();
    }
  },
  created() {
    this.getData();
    this.userInfo = JSON.parse(sessionStorage.getItem('sysuser'))
  }
};
</script>
<style scoped>
.size {
  width: 64px;
  height: 64px;
}
.fuck {
  text-align: center;
}
.tile.is-ancestor {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

.box {
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.1);
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
  color: #4a4a4a;
  display: block;
  padding: 1.25rem;
}

.tile {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: block;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

.tile.is-child {
  margin: 0 !important;
}

.media {
  background-color: rgb(240, 229, 229);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
}

.media-left {
  margin-right: 1rem;
}

.media-content {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  text-align: left;
}

.tile.is-8 {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 66.66667%;
}

.article {
  display: block;
  unicode-bidi: isolate;
}

.navbar-item {
  margin-top: 40px;
  margin-right: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
</style>